<template>
  <div class="h-full flex flex-col">
    <div class="chart_title">大区收益</div>
    <div ref="chartRef" class="flex-1 mt-4"></div>
  </div>
</template>

<script setup>
import echarts from "~/utils/echarts.config";
import useEcharts from "@/hooks/useEcharts";

const props = defineProps({
  datas: {
    type: Array,
    required: true,
  },
});
const { echartResize, echartFontSetting } = useEcharts();
const chartRef = ref();
const myChart = ref();

const chartInit = () => {
  const option = {
    grid: {
      left: "5%", // 图表左边距占整体宽度的百分比
      right: "5%", // 图表右边距占整体宽度的百分比
      top: "5%", // 图表上边距占整体高度的百分比
      bottom: "5%", // 图表下边距占整体高度的百分比
      containLabel: true, // 是否包含坐标轴标签，默认为 false
    },
    // x轴配置
    xAxis: {
      type: "category", // 类型为类目轴
      data: props.datas.map(item => item.name),
      axisLine: {
        lineStyle: {
          color: "#333", // x轴轴线颜色
        },
      },
    },
    // y轴配置
    yAxis: {
      type: "value", // 类型为数值轴
      axisLine: {
        lineStyle: {
          color: "#333", // x轴轴线颜色
        },
      },
      axisLabel: {
        formatter: "{value} 万元", // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
        // margin: 10, // y轴标签与轴线的距离
        color: "#333", // y轴标签颜色
        fontSize: 16, // y轴标签字体大小
      },
    },
    // 数据系列配置
    series: [
      {
        data: props.datas.map(item => item.value),
        type: "bar", // 类型为柱状图
        label: {
          show: true, // 显示标签
          position: "top", // 标签位置在柱子顶部
        },
        itemStyle: {
          color: params => {
            // 自定义每个柱子的颜色
            const colors = ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452"];
            return colors[params.dataIndex % colors.length];
          },
        },
      },
    ],
  };
  option && myChart.value.setOption({ ...option, ...echartFontSetting() });
};

watch(() => props.datas, chartInit);

onMounted(() => {
  myChart.value = echarts.init(chartRef.value);
  echartResize(myChart.value);
  chartInit();
});
</script>

<style lang="scss" scoped></style>
